<template>
  <div id="app">
      <el-container>
          <el-header>Servlet + Mybatis + Maven + Git + Vue + ElementUI -> 前后端分离开发</el-header>
          <el-container>
              <el-aside width="150px">
                  <el-menu
                          router
                          :default-active="this.$route.path"
                          background-color="#545c64"
                          text-color="#fff"
                          active-text-color="#ffd04b">
                      <el-submenu :index="menu.id" v-for="menu in menus" :key="menu.id">
                          <template slot="title">
                              <i :class="menu.icon"></i>
                              <span>{{menu.title}}</span>
                          </template>
                          <el-menu-item :index="menu.path + child.path" v-for="child in menu.children">
                              <template slot="title">
                                  <i :class="child.icon"></i>
                                  <span>{{child.title}}</span>
                              </template>
                          </el-menu-item>
                      </el-submenu>

                  </el-menu>
              </el-aside>
              <el-main>
                  <router-view/>
              </el-main>
          </el-container>
      </el-container>

  </div>
</template>


<script>
    import menus from "@/api/menu";
    export default {
        name:'App',
        data(){
            return {
                menus
            }
        },
        created() {
            this.aa()
        },
        methods:{
            aa(){
               console.log( "router:",this.$route.path)
            }
        }
    }
</script>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .el-header, .el-footer {
        background-color: rgb(84,92,100);
        color: #333;
        text-align: right;
        line-height: 60px;
        color:white
    }

    .el-aside {
        background-color: rgb(84,92,100);
        color: #333;
        text-align: center;
        line-height: 20px;
        height: 800px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 20px;
    }

    body > .el-container {
        margin-bottom: 40px;
    }
    .el-menu-item{
        margin-left: 5px;
    }
    .el-submenu{
        text-align: left;
    }
    .el-menu{
        border-right: 0px !important;
    }
    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
</style>
